// out: ../css/dynamic_video.css
@import 'common';
html,
body {
  background: rgba(0, 0, 0, 0);
}

.video-wrap {
  background: #000;
}

.control-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .control-header {
    display: flex;
    height: 60px;
    padding-top: 24px;
    background: rgba(0, 0, 0, 0.6);
    .goback {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 60px;
      margin-right: 10px;
      .iconfont {
        font-size: 24px;
        color: #fff;
      }
    }
    .user-wrap {
      display: flex;
      align-items: center;
      .user-avatar {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        img {
          display: block;
          width: 100%;
          border-radius: 40px;
        }
      }
      .user-info {
        color: #fff;
        font-size: 12px;
      }
    }
  }
  .control-main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    .iconfont {
      color: #fff;
      font-size: 30px;
      // -webkit-text-fill-color: #fff;
      // -webkit-text-stroke: 1px @main-color;
    }
  }
  .control-footer {
    .description {
      height: 40px;
      padding: 0 20px;
      line-height: 40px;
      color: #fff;
      font-size: 14px;
    }
    .menu-list {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.6);
      .menu-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        padding: 10px 0;
        .iconfont {
          font-size: 20px;
          color: #fff;
        }
        span {
          font-size: 12px;
          color: #fff;
        }
      }
    }
  }
}